<template>
    <div>
        <!-- 优惠券详情页 -->
        <BackBtn />
        <div class="pic">
            <img :src="ticketInfo.imgUrl">
        </div>
        <div class="container">
            <div class="ticket-info">
                <div class="ticket-title">{{ ticketInfo.title }}</div>
                <div class="info-bottom">
                    <div class="ticket-num">{{ ticketInfo.price }}<span class="text">积分</span></div>
                    <div class="remain">剩余{{ ticketInfo.remain }}</div>
                </div>
            </div>
            <div class="notice">
                <div class="notice-title">兑换须知</div>
                <ul>
                    <li v-for="(item,index) in ticketInfo.notice" :key="index">{{ item }}</li>
                </ul>
            </div>
        </div>
        <div class="bottom-btn">
            <div class="add-btn">立即兑换</div>
        </div>
    </div>
</template>

<script>
import ticketInfo from '../ticket';
export default {
    data() {
        return {
            ticketInfo: ticketInfo[this.$route.params.ticketTypeId-1].tickets[this.$route.params.ticketId-1]
        }
    }
}
</script>

<style lang="less" scoped>
.pic {
    height: 350px;
    img {
        width: 100%;
        height: 100%;
    }
}

.container {
    padding: 15px 10px 0;
    box-sizing: border-box;

    .ticket-info {
        width: 100%;
        height: 90px;
        background-color: #fff;
        border-radius: 15px;
        margin-bottom: 15px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);

        .ticket-title {
            font-size: 18px;
            font-weight: 500;
        }

        .info-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ticket-num {
                color: #0151c6;
                font-size: 20px;
                font-weight: 600;
                color: #143b9c;
                .text {
                    font-size: 16px;
                    font-weight: 400;
                    margin-left: 3px;
                }
            }

            .remain {
                font-size: 12px;
                font-weight: 400;
                margin-left: 3px;
                color: #999;
            }
        }
    }

    .notice {
        width: 100%;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);
        padding: 20px 10px;
        box-sizing: border-box;
        margin-bottom: 80px;
        .notice-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        ul {
            li {
                line-height: 25px;
                color: #666666;
            }
        }
    }
}

.bottom-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 10px 0;

    .add-btn {
        height: 50px;
        width: 100%;
        border-radius: 30px;
        background-color: #0151c6;
        color: #fff;
        font-weight: 500;
        text-align: center;
        line-height: 50px;
    }
}
</style>